<template>
	<view class="container">
		<view class="flex list">
			<view>商户名称</view>
			<input type="text" placeholder="请输入商户名称" v-model="settledObj.shopName" />
		</view>
		<view class="flex list">
			<view>手机号</view>
			<input type="number" placeholder="请输入手机号" maxlength="11" v-model="settledObj.phone" @blur="iptBlur" />
		</view>
		<view class="flex list">
			<view>商家平台</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
		</view>
		<view class="flex list">
			<view style="flex-shrink: 0;">地区</view>
			<view @click="siteChooseLocation">{{addressInfo?addressInfo:'请选择地区'}}</view>
			<!-- <sh-address v-model:codeValue="valCode" v-model="val" @change="(e)=>change(e)">
				{{
			    addressInfo
			      ? `${addressInfo.province}-${addressInfo.city}`
			      : "点此选择区域"
			  }}
			</sh-address> -->
		</view>
		<view class="flex list">
			<view>详细地址</view>
			<input type="text" placeholder="请输入详细地址" disabled v-model="settledObj.address" />
		</view>
		<view>
			<view>请上传商家二维码</view>
			<image :src="settledObj.shopRccode?settledObj.shopRccode:'../../static/info/addPhoto.png'" class="addPhoto"
				@click="upCode"></image>
		</view>
		<view class="flex list">
			<view>营业时间</view>
			<view class="flex">
				<!-- start="09:01"   end="21:01" -->
				<picker mode="time" :value="time" @change="bindstartTimeChange">
					<view class="uni-input">{{settledObj.startTime||'请选择'}}</view>
				</picker>
				—
				<!-- start="09:01"  end="21:01" -->
				<picker mode="time" :value="time" @change="bindendTimeChange">
					<view class="uni-input">{{settledObj.endTime||'请选择'}}</view>
				</picker>
			</view>
		</view>
		<view class="applyBtn" @click="settled()">申请入驻</view>
	</view>
</template>

<script>
	import {
		settled,
		loadDiceByCode
	} from '../../common/api.js'
	import UploadImageS from '@/utils/upload_image.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				site: '',
				array: ['饿了么', '美团'],
				arrayCode: [],
				index: 0,
				date: currentDate,
				time: '12:01',
				addressInfo: '',
				valCode: [],
				val: [],
				settledObj: {
					address: "",
					endTime: "",
					location: "",
					shopRccode: "",
					phone: "",
					platform: "",
					shopName: "",
					startTime: "",
					lat: '',
					lon: ''
				}
			}
		},
		onShow() {
			this.loadDiceByCode()
		},
		methods: {
			siteChooseLocation() {
				console.log('UploadImageS11')
				uni.chooseLocation({
					success: (res) => {
						this.addressInfo = res.address
						this.settledObj.address = res.name
						this.settledObj.lat = res.latitude
						this.settledObj.lon = res.longitude
					}
				});
			},
			loadDiceByCode() {
				loadDiceByCode({
					dictCode: 'platform_type'
				}).then(res => {
					this.array = []
					this.arrayCode = []
					res.result.map(v => {
						this.array.push(v.title)
						this.arrayCode.push(v.value)
					})
				})
			},
			iptBlur(e) {
				if (!/^1[3456789]\d{9}$/.test(this.settledObj.phone) && this.settledObj.phone != '') {
					uni.showToast({
						title: '电话格式不正确',
						icon: 'none'
					})
					this.settledObj.phone = ''
					return
				}
			},
			upCode() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImageS(tempFilePaths, {
							complete: function(res) {
								that.settledObj.shopRccode = res[0].img_url
							},
						})
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			settled() {
				if (this.settledObj.phone == '') {
					this.$toast('请填写手机号')
				}
				this.settledObj.platform = this.arrayCode[this.index]
				settled(this.settledObj).then(res => {
					this.$toast(res.message)
					if (res.success) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			change(e) {
				console.log(e)
				this.addressInfo = e;
				this.valCode = [e.provinceCode, e.cityCode, e.areaCode]
				this.settledObj.location = '' + e.provinceCode + ',' + e.code
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value //this.arrayCode[e.detail.value]
			},
			bindstartTimeChange: function(e) {
				this.settledObj.startTime = e.detail.value
			},
			bindendTimeChange: function(e) {
				this.settledObj.endTime = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>


<style scoped>
	.applyBtn {
		position: absolute;
		bottom: 108rpx;
		left: 60rpx;
		width: 586rpx;
		height: 86rpx;
		border-radius: 62rpx;
		background: linear-gradient(90deg, #ffc114 0%, #fdba00 100%);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 86rpx;
		text-align: center;
		color: #ffffff;
	}

	input {
		text-align: right;
	}

	.list {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.addPhoto {
		width: 224rpx;
		height: 224rpx;
		margin: 57rpx 190rpx;
	}

	.container {
		width: 594rpx;
		height: 88vh;
		border-radius: 28rpx;
		opacity: 1;
		background: #ffffff;
		margin: 28rpx 30rpx;
		color: #333333;
		font-size: 30rpx;
		padding: 20rpx 48rpx;
		position: relative;
	}
</style>
<style>
	page {
		background: #F4F5F9;
	}
</style>